<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 —— www.zhinengshe.com 智能社</title>
<link rel="stylesheet" type="text/css" href="flash.css">
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
// function getByClass(oParent,sClass){
//     var oEle = oParent.getElementsByTagName('*');
//     //声明一个数组，存选中的元素
//     var aResult = [];
//     //循环
//     for(var i=0;i<oEle.length;i++){
//         if(oEle[i].className == sClass){
//             aResult.push(oEle[i]);   //把选中的元素堆到数组里
//         }
//     }

//     return aResult; //返回这个数组

// };

window.onload = function(){
    //先获取元素
    var oDiv = document.getElementById('playimg');   //div

    //左右按钮
    var oBtnPrev = getByClass(oDiv,'prev')[0];        //prev按钮
    var oBtnNext = getByClass(oDiv,'next')[0];        //next按钮

    //左右遮罩
    var oMarkLeft = getByClass(oDiv,'mark_left')[0];  //左：mark_left
    var oMarkRight = getByClass(oDiv,'mark_right')[0];//右：mark_right

    //当我鼠标移入左边遮罩的时候，现在左边的按钮
    oBtnPrev.onmouseover = oMarkLeft.onmouseover = function(){
        //调用运动函数
        startMove(oBtnPrev,'opacity',100);   //oBtnPrev按钮的透明度从0变到100
    };
    //鼠标移出，恢复正常
    oBtnPrev.onmouseout =oMarkLeft.onmouseout = function(){
        //调用运动函数
        startMove(oBtnPrev,'opacity',0);   //oBtnPrev按钮的透明度从0变到100
    };
   alert(window.opacity);
};

</script>
</head>

<body>
<div id="playimg" class="play">
    <ul class="big_pic">

		<div class="prev"></div>
		<div class="next"></div>

		<div class="text">加载图片说明……</div>
		<div class="length">计算图片数量……</div>
		
		<a class="mark_left" href="javascript:;"></a>
		<a class="mark_right" href="javascript:;"></a>
		<div class="bg"></div>
		
        <li style="z-index:1;"><img src="img/1.jpg" /></li>
        <li><img src="img/2.jpg" /></li>
        <li><img src="img/3.jpg" /></li>
        <li><img src="img/4.jpg" /></li>
        <li><img src="img/5.jpg" /></li>
        <li><img src="img/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="img/1.jpg" /></li>
            <li><img src="img/2.jpg" /></li>
            <li><img src="img/3.jpg" /></li>
            <li><img src="img/4.jpg" /></li>
            <li><img src="img/5.jpg" /></li>
            <li><img src="img/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>
